<template>
    <div class="captain">
        <!--客服主管-->
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column align="left" prop="id" label="ID"></el-table-column><!--序号-->
                <el-table-column align="left" prop="username" :label="$t('common.accountName')"></el-table-column><!--账号名称-->
                <el-table-column align="left" prop="typeIdName" :label="$t('common.roleType')"><!--角色类型-->
                    <template slot-scope="scope">{{ $i18n.locale === 'zhCN' ? scope.row.roleName : scope.row.typeIdName}}</template>
                </el-table-column>
                <el-table-column align="left" prop="userCount" :label="$t('authority.managePerson')"></el-table-column><!--管理人员数-->
            </el-table><!--end table-->
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

    </div>
</template>

<script>
import Pagination from '@/components/pagination';
import mixin from '@/service/mixin';

export default {
    name: 'customManage',
    props: {
        activeTab: {
            type: String,
            required: true
        },
        searchForm: {
            type: Object,
            required: true
        },
        roleType: {
            default: 2,
        }
    },
    components: {
        Pagination
    },
    mixins: [mixin],
    data() {
        return {
            // thisRoleType: 2,
            isListening: false
        };
    },
    watch: {
        activeTab(val) {
            if ('customManage' === val) {
                this.page.currentPage = 1;
                this.getTableData();
            }
        },
        'searchForm.search'(val) {
            if (val && this.activeTab === 'customManage') {
                this.page.currentPage = 1;
                this.getTableData();
            }
        },
        roleType(val) {
            if (val && this.activeTab === 'customManage') {
                this.page.currentPage = 1;
                this.getTableData();
            }
        },
    },
    methods: {
        getTableData(page = this.page) {
            const params = {
                roleId: this.roleType,
                username: this.searchForm.username,
                leaderId: '',
                page: {
                    pageNo: page.currentPage,
                    pageSize: this.page.pageSize
                }
            };
            this.$api.telSales.getAllUserInfo(params).then((res) => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error) {
                    this.tableData = data.data;
                    this.page.pageCount = data.pageCount;
                    if (this.searchForm.search) {
                        this.$emit('search', this.searchForm);
                    }
                    this.tableMaxHeight = window.document.body.clientHeight - 230;
                }
            });
        }
    },
    created() {
        if (this.activeTab === 'customManage') {
            this.getTableData();
        }
    }
};
</script>

<style lang="scss" scoped>
.data_list{
    background-color: #fff;
    padding: 10px 16px;
}
</style>
